<template>
  <z-form-item
    v-if="basicForm?.isShow == '1'"
    class="z-form-item"
    style="margin-left: 120px"
  >
    <!-- :label-col="{ style: { width: '120px', paddingRight: '6px' } }"
    :required="formForm?.required === '1'"
    :prop="basicForm.field"
    :label="
      formForm?.headText && formForm.personal == '1'
        ? formForm?.headText
        : basicForm?.titleName || '树形'
    " -->
    <z-tree
      v-if="formForm.addOption.length > 0"
      v-model:selectedKeys="model[basicForm.field]"
      :selected-keys="formForm.value"
      :tree-data="formForm.addOption"
      :field-names="fieldNames"
      :default-expand-all="formForm.isExpand === '1'"
      :checkable="formForm.isShowCheckBox === '1'"
      :is-choose-last="formForm.isChooseLast === '1'"
    />
  </z-form-item>
</template>
<script>
import { computed, defineComponent, toRef, onMounted, ref } from 'vue'
import formInfo from '../../../api/renderForm/index.js'

export default defineComponent({
  name: 'TreeItem',
  props: {
    formProperty: {
      type: Object,
      default: undefined
    },
    basicProperty: {
      type: Object,
      default: undefined
    },
    formModel: {
      type: Object,
      default: undefined
    },
    formList: {
      type: Array,
      default: undefined
    }
  },
  setup(props, context) {
    const basicForm = toRef(props, 'basicProperty')
    const formForm = toRef(props, 'formProperty')
    const model = computed(() => (props.formModel ? props.formModel : {}))

    // 树形数据数组
    let addOption = ref([])

    // 字段名转换
    const fieldNames = computed(() => ({
      children: 'children',
      title: props.formProperty.label,
      key: props.formProperty.remoteValue,
      disabled: 'disabled'
    }))

    // 获取树形数据
    const getDataArr = () => {
      if (formForm.value.url) {
        formInfo.getRemoteData(formForm.value.url).then(res => {
          if (res.code === 1) {
            formForm.value.addOption = res.data
          }
        })
      }
    }

    // 初始化挂载
    onMounted(() => {
      getDataArr()
    })

    return {
      fieldNames,
      basicForm,
      formForm,
      model,
      addOption
    }
  }
})
</script>
<style lang="less" scoped>
.z-form-item {
  flex: 1;
}
</style>
